<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="24" class="search-form">
        <el-form :inline="true" :model="formInline" size="mini">
          <el-form-item label="用户名搜索:">
            <el-input class="ipt-width-150" v-model="formInline.name" placeholder="输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="ID搜索:">
            <el-input class="ipt-width-150" v-model="formInline.account" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item label="角色选择:">
            <el-select class="ipt-width-150" v-model="formInline.accState" placeholder="选择状态">
              <el-option label="--请选择--" value="0"></el-option>
              <el-option
                v-for="(item,index) in roleselected"
                :key="index"
                :label="item.rolename"
                :value="item.rolename"
              ></el-option>
              <!-- <el-option label="女" value="2"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchAccount">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clearall">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="user-list">
      <el-button type="primary" class="only" @click="addAccount">添加</el-button>
      <el-col :span="20">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :body-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          ref="multipleTable"
          border
          style="width: 100%"
        >
          <el-table-column prop="info1.empid" label="账号" width="120"></el-table-column>
          <el-table-column prop="info1.emp.username" label="用户姓名" width="180"></el-table-column>
          <el-table-column prop="info1.emp.sex" label="性别" width="120"></el-table-column>
          <el-table-column prop="info2.dept.name" label="部门" width="200"></el-table-column>
          <el-table-column prop="info2.position.name" label="职务" width="200"></el-table-column>
          <el-table-column prop="info1.role.rolename" label="角色" width="200"></el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="view(scope.row)" type="text" size="small">查看用户</el-button>
              <el-button @click="look(scope.row)" type="text" size="small">权限分配</el-button>
              <el-button @click="write(scope.row)" type="text" size="small">修改用户</el-button>
              <el-button @click="deleteitem(scope.row)" type="text" size="small">删除用户</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row class="user-list" type="flex" justify="center" style="text-align: center">
      <el-col :span="24">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="div1">权限管理</div>
      <div class="divdiv">
        <span class="divdiv1">姓名：{{index1}}</span>
        <span>编号：{{index2}}</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-form :model="form">
          <el-form-item class="div4" label="选择角色：">
            <el-select @change="rulechange" class="div3" v-model="form.region" placeholder="请选择角色">
              <el-option
                v-for="(item,index) in ruledata"
                :key="index"
                :label="item.rolename"
                :value="item.rolename"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="div2">权限</div>
          <div class="div7">系统设置：</div>
          <el-form-item label>
            <el-checkbox-group class="div5" v-model="form.type" disabled>
              <el-checkbox label="系统配置" name="type1"></el-checkbox>
              <el-checkbox label="登录日志" name="type2"></el-checkbox>
              <el-checkbox label="操作日志" name="type3"></el-checkbox>
              <el-checkbox label="角色管理" name="type4"></el-checkbox>
              <el-checkbox label="权限分配" name="type5"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="div6">我的桌面</div>
          <el-form-item label>
            <el-checkbox-group class="div5" v-model="form.type">
              <el-checkbox label="最新通告" name="type1"></el-checkbox>
              <el-checkbox label="待处理任务" name="type2"></el-checkbox>
              <el-checkbox label="工作安排与提醒" name="type3"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- <el-button type="primary" round>保存</el-button> -->
        </el-form>
        <div class="divd">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ruleconfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <el-dialog title :visible.sync="dialogFormVisible">
      <div v-show="modelstate">
        <span class="modify">用户名: {{model1}}</span>
        <span>ID:{{model2}}</span>
        <el-form :model="form">
          <el-form-item label="用户名:" class="width" :label-width="formLabelWidth">
            <el-input v-model="form.name" placeholder="请输入用户名" ref="name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别:" class="width" :label-width="formLabelWidth">
            <el-input v-model="form.sex" ref="sex" placeholder="请输入性别" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色:" class="width" :label-width="formLabelWidth">
            <el-input v-model="form.regDate" placeholder="请输入角色" ref="regDate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职称:" class="width" :label-width="formLabelWidth">
            <el-input v-model="form.sf" ref="sf" placeholder="请输入职称" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="lookstate" class="lookstate">
        <p>账号:{{viewdata.empid}}</p>
        <p>姓名:{{viewdata.username}}</p>
        <p>性别:{{viewdata.sex}}</p>
        <p>部门:{{viewdata.deptname}}</p>
        <p>职务:{{viewdata.positionname}}</p>
        <p>角色:{{viewdata.manage}}</p>
      </div>
      <div slot="footer" class="dialog-footer footer1">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmed()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let that = this;
export default {
  name: "accountManagement",
  data() {
    return {
      rolecontent: "",
      roleselected: [],
      formInline: { account: "", name: "", accState: "不限" },
      model1: "",
      model2: "",
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      dialogVisible: false,
      index: 0,
      data: [{ endDate: "2017-11-16" }],
      dialogFormVisible: false,
      form: {
        name: "",
        sex: "",
        city: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        endDate: "",
        regDate: "",
        sf: "",
      },
      formLabelWidth: "60px",
      value: "",
      total: 0,
      lookstate: false,
      modelstate: false,
      ruledata: [],
      rulechanged: "",
      viewdata: {
        empid: 0,
        username: "",
        sex: "",
        deptname: "",
        positionname: "",
        manage: "",
      },
      index1: "",
      index2: "",
      send: 0, //roleid
      arrdata: [],
    };
  },
  methods: {
    roleselect(e) {
      this.rolecontent = e;
      console.log(this.rolecontent);
    },
    ruleconfirm() {
      this.dialogVisible = false;
      let url = "/api/batchInsertEmpRole";
      let data = [
        {
          empid: this.index2,
          roleid: this.send,
          rolename: this.rulechanged,
        },
      ];
      this.$axios({
        method: "post",
        url: url,
        data: JSON.stringify(data),
      }).then((res) => {
        console.log(res);
      });
    },
    rulechange(e) {
      console.log(e);
      this.rulechanged = e;
    },
    view(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.lookstate = true;
      this.modelstate = false;
      this.viewdata.empid = row.info1.empid;
      this.viewdata.username = row.info1.emp.username;
      this.viewdata.sex = row.info1.emp.sex;
      this.viewdata.deptname = row.info2.dept.name;
      this.viewdata.positionname = row.info2.position.name;
      this.viewdata.manage = row.info1.role.rolename;
      console.log(this.viewdata);
      // console.log(this.e.);
    },
    clearall() {
      this.formInline.account = "";
      this.formInline.name = "";
      this.formInline.accState = "";
    },
    deleteitem(e) {
      let that = this;
      console.log(e);
      let url = "/api/deleteUserById";
      let data = {
        id: e.info2.id,
      };
      console.log(data);
      this.$axios({
        method: "post",
        url: url,
        data: JSON.stringify(data),
      }).then((res) => {
        that.showall();
      });
      // console.log(that.splice(e.id-1,1))
    },
    contact: function () {
      let url = `/api/order/test`;
      let data = { id: 2 };
      this.$axios.post(url, data).then((data) => {
        console.log(data);
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    look(row) {
      this.send = row.info1.roleid;
      this.dialogVisible = true;
      this.index = row;
      this.index1 = row.info1.emp.username;
      this.index2 = row.info1.empid;
      console.log(this.send);
      console.log(this.index2);
      let that = this;
      let url = "/api/selectAllRole";
      let data = {};
      this.$axios({
        method: "post",
        url: url,
        data: JSON.stringify(data),
      }).then((res) => {
        console.log(res);
        let arr = res.data.data;
        arr.filter(function (val, index) {
          let n = 0;
          for (let i = 0; i < that.ruledata.length; i++) {
            if (that.ruledata[i].rolename == val.rolename) {
              n = 1;
              // console.log(val)
            }
          }
          if (n == 0) {
            that.ruledata.push(arr[index]);
          }
        });
        console.log(that.ruledata);
      });
    },
    write(row) {
      this.dialogFormVisible = true;
      this.modelstate = true;
      this.lookstate = false;
      this.value = row;
      this.model1 = this.value.info1.emp.username;
      this.model2 = this.value.info1.empid;
      console.log(this.value);
    },
    confirmed() {
      this.dialogFormVisible = false;
      // console.log(this.value)
    },
    //搜索帐号
    searchAccount() {
      let that = this;
      let urla = "/api/selectAllRole";
      let data = {};
      let arrr;
      let arr4 = [];
      let arr = [];
      this.$axios({
        method: "post",
        url: urla,
        data: JSON.stringify(data),
      }).then((res) => {
        console.log(res.data.data);
        arrr = res.data.data;
        for (let i = 0; i < res.data.data.length; i++) {
          // console.log
          let count = 0;
          for (let n = 0; n < that.roleselected.length; n++) {
            if (that.roleselected[n].rolename == res.data.data[i].rolename) {
              count = 1;
              break;
            }
          }
          if (count == 0) {
            that.roleselected.push(res.data.data[i]);
          }
        }
      });
      let url = "/api/selectAllUser";
      // let that = this;
      this.$axios({
        method: "post",
        url: url,
      }).then((res) => {
        let urla = "/api/selectAllUserRoles";
        let that = this;
        console.log(res.data.data);
        arr = res.data.data;
        this.$axios({
          method: "post",
          url: urla,
        }).then((res) => {
          console.log(res.data.data);
          let arr1 = res.data.data;

          console.log(arr1);
          console.log(arr);
          for (let i = 0; i < arr.length; i++) {
            let x = 0;
            let arr3 = {
              info1: {},
              info2: {},
            };
            // console.log(arr[i].emp.username);
            arr3.info2 = arr[i];
            for (let x = 0; x < arrr.length; x++) {
              if (arr1[i].role.rolename == arrr[x].rolename) {
                arr1[i].roleid = arrr[x].roleid;
              }
            }
            // arr3.info1 = arr1[i];
            // console.log(arr1.length);
            for (let n = 0; n < arr1.length; n++) {
              if (arr[i].emp.username == arr1[n].emp.username) {
                // console.log(arr1[n].emp.username);
                // console.log(arr1[n]);
                arr3.info1 = arr1[n];
                arr4.push(arr3);
                x = 1;
              }
            }
            if (x == 0) {
              arr3.info1 = arr[i];
              arr4.push(arr3);
            }
            // arr3.info2 = arr
            // arr4.push(arr3);
          }
          // console.log(arr4)
          arr4 = arr4.filter(function (val, index) {
            // console.log("初始" + index);
            if (val.info1.emp.sex == 0) {
              // console.log(index);
              val.info1.emp.sex = "男";
            } else if (val.info1.emp.sex == 1) {
              val.info1.emp.sex = "女";
              // console.log(index);
            }
            return true;
          });
          that.arrdata = arr4;
          // console.log(that.arrdata)
          console.log(that.arrdata);
          let arra = arr4;
          console.log(arra);
          console.log(that.formInline);
          if (that.formInline.account) {
            arra = arra.filter(function (val, index) {
              // console.log(val.info1.empid + "---" + that.formInline.account);
              return val.info1.empid == that.formInline.account;
            });
          }
          console.log(arra);
          if (that.formInline.name) {
            // console.log(arr);
            arra = arra.filter(function (val, index) {
              return val.info2.emp.username == that.formInline.name;
            });
          }
          console.log(arra);
          console.log(that.formInline.accState);
          if (
            that.formInline.accState != "不限" &&
            that.formInline.accState != "0" &&
            that.formInline.accState != ""
          ) {
            arra = arra.filter(function (val, index) {
              return val.info1.role;
            });
            console.log(arra)
            arra = arra.filter(function(val,index){
                return val.info1.role.rolename == that.formInline.accState
            })
          }
          console.log(arra);
          // console.log(that.formInline.state);
          that.tableData = arra;
          console.log(that.tableData);
          // console.log(that.tableData)
          that.total = that.tableData.length;
        });
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //    添加账号
    addAccount() {
      this.$router.push({ path: "/about/addUser" });
    },
    handleClick(row, column, index) {
      // console.log(row);
      // console.log(column);
      // console.log(index);
    },
    show() {
      console.log(1);
    },
    showall() {
      let that = this;
      let urla = "/api/selectAllRole";
      let data = {};
      let arrr;
      let arr = [];
      this.$axios({
        method: "post",
        url: urla,
        data: JSON.stringify(data),
      }).then((res) => {
        console.log(res.data.data);
        arrr = res.data.data;
        for (let i = 0; i < res.data.data.length; i++) {
          // console.log
          let count = 0;
          for (let n = 0; n < that.roleselected.length; n++) {
            if (that.roleselected[n].rolename == res.data.data[i].rolename) {
              count = 1;
              break;
            }
          }
          if (count == 0) {
            that.roleselected.push(res.data.data[i]);
          }
        }
      });
      let url = "/api/selectAllUser";
      // let that = this;
      this.$axios({
        method: "post",
        url: url,
      }).then((res) => {
        let urla = "/api/selectAllUserRoles";
        let that = this;
        console.log(res.data.data);
        arr = res.data.data;
        this.$axios({
          method: "post",
          url: urla,
        }).then((res) => {
          console.log(res.data.data);
          let arr1 = res.data.data;
          let arr4 = [];

          console.log(arr1);
          console.log(arr);
          for (let i = 0; i < arr.length; i++) {
            let x = 0;
            let arr3 = {
              info1: {},
              info2: {},
            };
            // console.log(arr[i].emp.username);
            arr3.info2 = arr[i];
            for (let x = 0; x < arrr.length; x++) {
              if (arr1[i].role.rolename == arrr[x].rolename) {
                arr1[i].roleid = arrr[x].roleid;
              }
            }
            // arr3.info1 = arr1[i];
            // console.log(arr1.length);
            for (let n = 0; n < arr1.length; n++) {
              if (arr[i].emp.username == arr1[n].emp.username) {
                console.log(arr1[n].emp.username);
                console.log(arr1[n]);
                arr3.info1 = arr1[n];
                arr4.push(arr3);
                x = 1;
              }
            }
            if (x == 0) {
              arr3.info1 = arr[i];
              arr4.push(arr3);
            }
            // arr3.info2 = arr
            // arr4.push(arr3);
          }
          console.log(arr4);
          that.tableData = arr4;
          that.total = that.tableData.length;
          console.log(that.tableData[4].info1.emp.sex);
          // that.tableData.filter(function (val, index) {
          //   console.log("初始" + index);
          //   if (val.info1.emp.sex == 0) {
          //     console.log(index);
          //     val.info1.emp.sex = "男";
          //   } else if (val.emp.sex == 1) {
          //     val.info1.emp.sex = "女";
          //     console.log(index);
          //   }
          //   return true;
          // });
          that.viewdata = that.tableData[0];
        });
      });
    },
  },
  created() {
    this.total = this.tableData.length;
    this.showall();
  },
  // computed() {
  //   this.total = this.tableData.length;
  // },
};
</script>

<style scoped lang="less">
.lookstate {
  // border: 1px solid;
  text-align: center;
  & > p {
    width: 70%;
    margin: 0px auto;
    padding: 20px 0px 20px 0px;
    border-bottom: 1px solid;
  }
}
.only {
  display: block;
  margin-bottom: 1%;
}
.divdiv1 {
  margin-right: 5%;
}
.divdiv {
  margin-top: 1%;
  margin-bottom: -2%;
}
.div1 {
  color: black;
  font-weight: 600;
  font-size: 20px;
  margin-top: -5%;
}
.divd {
  width: 100%;
  display: flex;
  justify-content: center;
}
.div7 {
  margin-top: 3%;
  display: flex;
  width: 30%;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}
.div6 {
  display: flex;
  width: 30%;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}
.div5 {
  display: flex;
  flex-wrap: wrap;
}
.div4 {
  display: flex;
}
.div3 {
  border-radius: 6px;
  border: 1px solid black;
  margin-left: 0px;
}
.div2 {
  text-align: left;
  border-bottom: 1px solid black;
  padding-bottom: 5px;
}
.modify {
  margin-left: 20%;
  margin-right: 3%;
  margin-bottom: 2%;
}
.footer1 {
  margin: 0px auto;
  // border: 1px solid red;
  width: 24%;
}
.width:nth-of-type(1) {
  margin-top: 50px;
}
.width {
  margin: 0px auto;
  margin-bottom: 3%;
  width: 60%;
}
.search-form {
  border: 1px solid #e4e4e4;
  padding: 20px 20px 0;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.ipt-width-150 {
  width: 150px !important;
}

.user-list {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.btn-group {
  margin-top: 20px;
}
</style>